@use "design-system";

.import-srp {
  &__container {
    display: grid;
    grid-template-areas:
      'title'
      'paste-tip'
      'input'
      'error'
      'too-many-words-error';
  }

  &__dropdown-container {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  @include design-system.screen-md-max {
    &__container {
      grid-template-areas:
        'title'
        'dropdown'
        'paste-tip'
        'input'
        'error'
        'too-many-words-error';
    }
  }

  &__srp-label {
    grid-area: title;
    text-align: center;
  }

  &__number-of-words-dropdown {
    grid-area: dropdown;
    width: 100%;
  }

  &__paste-tip {
    margin: 24px 0 12px 0;
    grid-area: paste-tip;
    width: auto;
    margin-left: auto;
    margin-right: auto;
  }

  &__srp {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-area: input;
  }

  @include design-system.screen-md-max {
    &__srp {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  &__srp-word {
    display: flex;
    align-items: center;
    margin: 8px;
  }

  &__srp-word-label {
    width: 2em;
  }

  &__srp-error {
    margin-top: 4px;
    grid-area: error;
  }

  &__srp-too-many-words-error {
    margin-top: 4px;
    grid-area: too-many-words-error;
  }

  &__continue-button {
    @include design-system.screen-sm-max {
      margin-bottom: 20px;
    }
  }
}
